<template>
  <!-- 整编库类型管理 -->
  <div class="IntegrationType">
    <el-button type="primary" @click="addType">新增</el-button>
    <el-table
      height="600"
      :data="tableList"
      v-loading="loading"
      :key="key"
      :header-cell-style="{ background: '#F0F0F6', color: '#2D3548' }"
      row-key="id"
      lazy
      style="width: 100%; margin-top: 10px"
    >
      <el-table-column
        prop="type_name"
        label="整编库类型名称"
      ></el-table-column>
      <el-table-column prop="creator" label="创建人"></el-table-column>
      <el-table-column prop="entry_time" label="创建时间"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            @click="handleClickSelect(scope.row)"
            type="success"
            size="small"
            >查看</el-button
          >
          <el-button
            size="small"
            type="warning"
            @click="handleClickEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="handleClickDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 查看弹窗 -->
    <el-dialog title="查看" :visible.sync="flag" width="30%">
      <el-form ref="form" :model="form" label-width="150px" size="mini">
        <el-form-item label="整编库类型名称：">
          <el-input
            v-model="form.type_name"
            size="mini"
            :disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="创建人：">
          <el-input
            v-model="form.creator"
            size="mini"
            :disabled="disabled"
          ></el-input>
        </el-form-item>
        <el-form-item label="创建时间：" v-if="isShow">
          <el-input
            v-model="form.entry_time"
            :disabled="true"
            size="mini"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" v-if="!disabled">
        <el-button @click="flag = false">取 消</el-button>
        <el-button type="primary" @click="handleSure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableList: [],
      loading: true,
      flag: false,
      disabled: true,
      isShow: true,
      form: {
        type_name: "",
        creator: "",
        entry_time: "",
      },
    };
  },
  mounted() {
    this.getZbkType();
  },
  methods: {
    // 获取整编库类型表格数据
    getZbkType() {
      this.$api
        .getZbkType()
        .then((res) => {
          if (res.code == 200) {
            this.loading = false;
            this.tableList = res.data;
            this.$message({
              showClose: true,
              message: res.msg,
              type: "success",
            });
          } else {
            this.$message({
              showClose: true,
              message: "查询失败",
              type: "error",
            });
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            message: error,
            type: "error",
          });
        });
    },
    // 点击新增
    addType() {
      this.flag = true;
      this.isShow = false;
      this.form = {};
      this.disabled = false;
    },
    // 点击查看
    handleClickSelect(data) {
      // 打开弹窗
      this.flag = true;
      //   表单设置为不可编辑
      this.disabled = true;
      this.isShow = true;
      this.form = data;
    },
    // 点击编辑
    handleClickEdit(data) {
      // 打开弹窗
      this.flag = true;
      //   表单设置为不可编辑
      this.disabled = false;
      this.isShow = true;
      this.form = data;
    },
    // 点击弹窗确定
    handleSure() {
      // 新增
      if (!this.isShow) {
        this.form.id = "";
      }
      //请求修改接口
      this.$api
        .saveZbkType(this.form)
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "success",
            });
            this.getZbkType();
            this.flag = false;
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "error",
            });
          }
        })
        .catch((error) => {
          this.$message({
            showClose: true,
            message: error,
            type: "error",
          });
        });
    },
    // 点击删除
    handleClickDelete(data) {
      console.log(data);
      this.$confirm("是否确认删除？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$api.deleteZbkType(data.id).then((res) => {
          console.log(res);
          if (res.code == 200) {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "success",
            });
            this.getZbkType();
          } else {
            this.$message({
              showClose: true,
              message: res.msg,
              type: "drange",
            });
          }
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.IntegrationType {
  padding: 30px;
  overflow: hidden;
}
::v-deep .el-dialog__body {
  padding: 30px 20px 30px 0 !important;
}
::v-deep .el-dialog__header {
  background: #e4e7ed;
}
</style>